<template>
  <h3>表格样式渲染测试</h3>

  <div id="wrap">
    <table>
      <tr class="mt-tr" v-for="rowData in tableData">
        <td v-for="cellData in rowData" :style="cellStyle(cellData.id)">
          <my-cell :cellValue="cellData.value"/>
        </td>
      </tr>
    </table>
  </div>

</template>

<script setup>

const tableData = [
  [
    {
      id: "00",
      value: 1,
    },
    {
      id: "01",
      value: 2,
    },
    {
      id: "02",
      value: 3,
    }
  ],
  [
    {
      id: "10",
      value: 4,
    },
    {
      id: "11",
      value: 5,
    },
    {
      id: "13",
      value: 6,
    }
  ]
];

const cellStyles = [
  {
    id: "01",
    backgroundColor: "#FF69B4"
  },
  {
    id: "02",
    backgroundColor: "#1E90FF"
  }
]


import {defineComponent, computed} from 'vue';
import MyCell from "@/components/MyCell";

defineComponent({
  name: 'MyTable',
  components: {
    MyCell
  }
})

const cellStyle = computed(() => {
  return function (id) {
    let style = cellStyles.find((item) => item.id === id)
    return {
      backgroundColor: style !== undefined ? style.backgroundColor : '',
    }
  }
})


</script>

<style scoped>
#wrap {
  position: absolute;
  left: 300px;
  top: 100px;
}

table {
  border-collapse: collapse;
  border: 1px #C4C7CE solid;
}

th, td {
  padding: 0;
  width: 100px;
  border: 1px #C4C7CE solid;
  text-align: center;
}

#operButton {
  position: absolute;
  left: 600px;
  top: 100px;
}

#operButton button {
  width: 100px;
  height: 50px;
}
</style>
